<template>
    <div class="app-container">
        <el-row :gutter="20" >
            <el-col :span="4" :xs="24" id="l_tree" :style="'height:'+ht+'px;'" >
                <el-tree v-loading="loadtreeing" :data="xzqhOptions" node-key="orgCd" :props="defaultProps" @node-click="handleNodeClick" default-expand-all ></el-tree>
            </el-col>
            <el-col :span="20" :xs="24" style="padding-left:15px; " >
                <el-form :model="queryParams" ref="queryForm" :inline="true" >
                    <!-- <el-form-item>
                            <treeselect v-model="queryParams.adCode" :options="xzqhOptions" :normalizer="normalizer"
                                :show-count="true" placeholder="行政区划" />
                    </el-form-item> -->
                    <!-- <el-form-item>
                        <el-select v-model="queryParams.chanName" placeholder="所属渠道" clearable size="small" >
                            <el-option v-for= "item in chList" :key="item.chanName" :label="item.chanName" :value="item.chanCode">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item>
                        <el-date-picker v-model="queryParams.dd" size="small" value-format="yyyy-MM-dd" @change="dateChange"
                            type="date" placeholder="请选择（日）" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-input v-model="queryParams.stName" placeholder="测站名称" clearable
                            size="small" @keyup.enter.native="handleQuery" />
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                      <el-button
                        type="warning"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        @click="handleExportDailyWaterReport"
                        v-hasPermi="['waterManagement:WrStatvolD:export']"
                      >导出</el-button>
                    </el-form-item>
                </el-form>

                <div class="tb_title" > {{orgNm}} {{detailTime}} 水量日报</div>
                <div class="tb_dw" >单位：<span>万m³</span></div>

                <el-table :data="wmList"  :span-method="cellMerge" border  style="width: 100%; margin-top: 30px" >
                    <!-- <el-table-column  prop="wagaName" label="所属闸点" width="180" align="center" ></el-table-column> -->
                    <el-table-column  prop="orgNm" label="名称" align="center" ></el-table-column>
                    <el-table-column  prop="dayVol" label="水量" align="center" ></el-table-column>

                </el-table>
            </el-col>
        </el-row>



    </div>
</template>

<script>
import { getxzqh ,listDailyReport } from "@/api/measurement/waterstatistics"
import { organtreeList } from "@/api/common"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "watermonitor",
    components: { Treeselect },
    dicts: ['sys_chan_level'],
    data() {
        return {
            // 行政区划树选项
            xzqhOptions: [],
            // 遮罩层
            loading: true,
            // 岗位表格数据
            wmList: [],
            resList:[],
            detailTime: '',
            // 查询参数
            queryParams: {
                orgCd: '',
                dd: '',
                title: '',
                orgNm:''
            },
            tableData: [],
            spanArr: [],
            pos: 0,
            tableHeight: 600,
            pickerOptions:{
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            xzqhOptions: [],
            defaultProps: {
                children: 'children',
                label: 'orgNm'
            },
            ht: 400,
            loadtreeing: true,
            orgNm:""
        };
    },
    created() {
        var htd = document.body.clientHeight*0.85;
        this.ht = htd;
        this.getTreeselect();
        //this.getList();
    },
    methods: {
      dateChange(value){
       this.getList();

      },

        handleNodeClick(data) {
            if (data) {
                this.queryParams.orgCd = data.orgCd;
                this.queryParams.orgNm = data.orgNm;
                //this.getTableYearMonth();
                this.orgNm = data.orgNm;
                this.handleQuery();
            }
        },
        /** 查询行政区域下拉树结构 */
        getTreeselect() {
            this.loadtreeing = true;
            organtreeList().then(response => {
                this.xzqhOptions = this.handleTree(response.data,"orgCd","parentOrgCd");
                let sgdata = this.xzqhOptions;
                this.queryParams.orgCd = sgdata[0].orgCd;
                this.queryParams.orgNm = sgdata[0].orgNm;
                this.orgNm = sgdata[0].orgNm;
                this.getList();
                this.loadtreeing = false;
            });
        },
        /** 获取浏览器高度并计算得到表格所用高度。 */
        getHeight(){
            this.tableHeight=document.documentElement.clientHeight-230;
        },
        dealWithTime(data) {
            let Y = data.getFullYear();
            let M = data.getMonth() + 1;
            let D = data.getDate();
            return Y + "年" + M + "月" + D + "日 ";
        },
        getSpanArr(data) {
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].waganame == data[i - 1].waganame) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
        },
        cellMerge({ row, column, rowIndex, columnIndex }) {
            return;
           if (columnIndex === 0) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                 rowspan: _row,
                 colspan: _col
              }
           }
        },
        /** 查询测站列表 */
        getList() {
            let that=this;
            this.loading = true;
            let qtime=''
            if(this.queryParams.dd==''){
                qtime=new Date();
            }else{
                qtime=new Date(this.queryParams.dd);
            }
            listDailyReport(this.queryParams).then(response => {
                this.wmList = response.data;
                this.getSpanArr(this.wmList);
                let stcodeset=new Set();
                for(let i=0;i<this.wmList;i++){
                    //
                    if(stcodeset.has(this.wmList[i].stcode)){

                    }else{
                        this.resList.push(this.wmList[i]);
                    }
                }
                /**数据拆分
                 * */
                that.detailTime=that.dealWithTime(qtime);
                this.loading = false;
            });
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.adCode,
                label: node.adName,
                children: node.children
            };
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
      /** 导出按钮操作 */
      handleExportDailyWaterReport() {
        this.download('waterManagement/WrStatvolD/exportDailyWaterReport', {
          ...this.queryParams
        }, this.queryParams.orgNm+this.detailTime + `水量日报计算表.xlsx`)
      },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .tb_title{
        width: 370px;
        text-align: center;
        margin: 5px auto;
        font-weight: 600;
    }

    .tb_dw{
        font-size: 13px;
        position: absolute;
        top: 90px;
        right: 40px;
        span{
            color: #349EDF;
        }
    }

    .el-form-item--medium .el-form-item__content {
        line-height: 30px;
    }

    .vue-treeselect__placeholder, .vue-treeselect__single-value {
        line-height: 30px;
    }

    .vue-treeselect {
        width: 215px;
        height: 30px;
        .vue-treeselect__control {
            height: 30px;
            .el-form-item--medium .el-form-item__content {
                line-height: 30px;
                .vue-treeselect__placeholder, .vue-treeselect__single-value {
                    line-height: 30px;
                }
            }
        }
    }

    #l_tree{
        padding-right:15px;
        border-right: 1px solid #e5e5e5;
        min-height: 600px;
        overflow-x: auto;
    }

    #l_tree::-webkit-scrollbar{
        width: 0px; /*对垂直流动条有效*/
    }

</style>
